<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>个人中心</title>
    <meta name="viewport" content=" initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link href="{$Think.config.RESOURCEURL}wx_assets/css/common.css{$Think.config.RESOURCE_VER}" rel="stylesheet">
    <script src="{$Think.config.RESOURCEURL}wx_assets/personCenter/js/mediaQuery.min.js{$Think.config.RESOURCE_VER}"></script>
    <script type='text/javascript' src='{$Think.config.RESOURCEURL}wx_assets/js/zepto.1.1.3.min.js'></script>
    <script src="{$Think.config.RESOURCEURL}wx_assets/js/zepto.alert.js" type="text/javascript"></script>
    <script src="{$Think.config.RESOURCEURL}wx_assets/js/util.js{$Think.config.RESOURCE_VER}"></script>
    <style type="text/css">
        html,body {
            height: 100%;
        }
        @font-face {
            font-family: 'iconfont';  /* project id 148121 */
            src: url('//at.alicdn.com/t/font_148121_6w44kj6brvcdte29.eot');
            src: url('//at.alicdn.com/t/font_148121_6w44kj6brvcdte29.eot?#iefix') format('embedded-opentype'),
            url('//at.alicdn.com/t/font_148121_6w44kj6brvcdte29.woff') format('woff'),
            url('//at.alicdn.com/t/font_148121_6w44kj6brvcdte29.ttf') format('truetype'),
            url('//at.alicdn.com/t/font_148121_6w44kj6brvcdte29.svg#iconfont') format('svg');
        }
        .iconfont{
            font-family:iconfont;
            color:#777;
            font-size:24px;}
        article {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            width: 100%;
            height: 100%;
        }
        .head {
            padding: 1rem 0;
            position: relative;
            <if condition="$mallHue.mallHue eq '1'">
            background:#323232;
            <else/>
            background:#f75493;
            </if>
            overflow:hidden;
            margin-bottom:.5rem;
            background-size: 100vw auto;
        }
        .head:before{
            content: '';
            width: 15rem;
            position: absolute;
            border-radius: 100%;
            height: 10rem;
            top: 50%;
            background: white;
            transform: translate(-50%,0);
            -webkit-transform: translate(-50%,0);
            left: 50%;
        }
        .mt20 {
            margin-top: .2rem;
        }
        .img {
            width: 1.6rem;
            height: 1.6rem;
            border-radius: .8rem;
            overflow: hidden;
            margin-left: .6rem;
            z-index: 2;
            position: relative;
            background-color:white;
            padding:2px;
            box-sizing:border-box;
            border:1px solid #ccc;
            top: .3rem;
        }
        article .img img {
            width: 100%;
            height: 100%;
            border-radius:50%;
        }
        article .head span {
            display:block;
            top:.5rem;
            font-size: .3rem;
            color:#333;
            width: 1.6rem;
            position: relative;
            text-align: center;
            margin-left: .6rem;
        }
        article .list{
            padding-left:.7rem;
        }
        article .list li {
            height: .96rem;
            background-size: .15rem .28rem;
            line-height: .96rem;
            font-size: 14px;
        }
        article .list li .icon{
            float: left;
            padding: 0.2rem 0;
            height: 100%;
            width: .5rem;
            position:relative;
            box-sizing: border-box;
            margin-right: .2rem;
        }
        article .list li i {
            transform: translate(-50%,-50%);
            -webkit-transform: translate(-50%,-50%);
            position: absolute;
            top: 50%;
            left: 50%;
        }
        article .list li img{
            transform: translate(-50%,-50%);
            -webkit-transform: translate(-50%,-50%);
            position: absolute;
            top: 50%;
            left: 50%;
            max-width:100%;
            max-height:50%;
        }
        article .list span {
            display: inline-block;
            height: .96rem;
            line-height: .96rem;
            color: {$mallHue.fontColor||default='#f75493'};
            font-size: 12px;
            margin-left: 2.3rem;
        }
        article .list li:last-child  {
            border: none;
        }
    </style>
</head>
<body>
<article>

    <div class="head" style="background-image: url('{$personCenterInfo.personHomePic}')">
        <div class="img">
            <if condition="$userInfo.headimgurl eq ''">
                <img src="{$Think.config.RESOURCEURL}wx_assets/personCenter/images/per_head.png{$Think.config.RESOURCE_VER}" alt="">
                <else/>
                <img src="{$userInfo.headimgurl}" alt="">
            </if>
        </div>
        <if condition="$userInfo.nickname eq ''">
            <span>&nbsp;</span>
            <else />
            <span>{$userInfo.nickname}</span>
        </if>

    </div>
    <volist name="personCenterInfo.menuJson" id="group">
        <ul class="list">
            <volist name="group" id="menu">
                <li onclick="bindMenuClick('{$menu.url}')">
                    <div class="icon">
                    <if condition="$menu.iconurl neq ''">
                        <img src="{$menu.iconurl}" alt="">
                        <elseif condition="$menu.name eq '基本信息'"/>
                        <i class="iconfont">&#xe661;</i>
                        <elseif condition="$menu.name eq '订单'"/>
                        <i class="iconfont">&#xe6c5;</i>
                        <elseif condition="$menu.name eq '收藏'"/>
                        <i class="iconfont">&#xe600;</i>
                        <elseif condition="$menu.name eq '优惠券'"/>
                        <i class="iconfont">&#xe627;</i>
                    </if>
                    </div>
                    {$menu.name}
                </li>
            </volist>
        </ul>
    </volist> 
</article>
</body>
</html>
<script>
  if ($.util.getUa() == 'weixin') {
    $('li').each(function () {
      if ($(this).html().indexOf('退出') > 0) {
        $(this).hide()
      }
    })
  }
  
  function bindMenuClick (url) {
    if (url.indexOf('&module=personCenter&method=logout') > 0) {
      $.ajax({
        type: "get",
        url: '{$Think.config.SERVER_HOST}call.json?customerId={$customerId}',
        dataType: 'json',
        data: {
          module: 'personCenter',
          method: 'logout'
        },
        success: function (res) {
          if (res && res.code == 0) {
            window.location.href = '{$Think.config.SERVER_HOST}call.html?customerId={$customerId}&module=personCenter&method=login'
          } else {
            alert('退出失败！')
          }
        }
      });
    } else {
      window.location.href = url
    }
  }
</script>